<template>
      <van-cell class="article-item" :to="{
         name:'article',
         params:{
            articleId:article.id
         }
      }">
        <template #title>
            <span class="title van-multi-ellipsis--l2">{{ article.title }}</span>
        </template>
        <template #label>
            <div v-if="article.type===3" class="cover-wrap">
            <div v-for="(img,index) in article.images" :key="index" class="cover-item">
                
                <van-image width="100" height="100" :src="`${url}`+img"></van-image>
            </div>
            </div>

            <span class="infospan">{{ article.aut_name }}</span>
            <span class="infospan">{{ article.comm_count }}</span>
            <span class="infospan">{{ dayjs().to(   dayjs(  article.pubdate )  ) }}</span>
        </template>
        <!-- src="http://img.yzcdn.cn/vant/cat.jpeg" -->
        <template #right-icon>
            <van-image 
            v-if="article.type===1 "
            width="100" height="100" 
            
            :src="`${url}`+article.images[0]"
            ></van-image>
        </template>
      </van-cell>
</template>

<script>
import { ref, onMounted } from 'vue';
import dayjs from '../../utils/day.js';

export default {
    props:
    {
        article:{
           type:Object,
           required:true 
        }
    },
     setup() {
        const  url=import.meta.env.VITE_APP_URL;
        return { url ,dayjs }
     
    },
 };
</script>
<style>
     .article-item .title{font-size: 20px;color:#363636;}
     .article-item .van-cell_value{
        flex:unset;width: 232px; height: 146px;padding-left: 25px;
     }
     .article-item .right-cover{
        width:132px;height: 146px;
     }
     .article-item .label-info-wrap span{
        font-size: 14px;color:#b4b4b4;margin-right: 25px;
     }
     .article-item .cover-wrap{
        display: flex;
     }
     .article-item .cover-wrap .cover-item{
        flex: 1;
     }
     .infospan{margin: 0 10px;}
</style>